<template>
    <div>
        <div v-if="false" class="no_vip flex-column flex-v-center">
            <image src="/static/images/no-mem-bg.webp" mode="widthFix" />
            <div class="title">引流吸粉神器</div>
            <p>海量推广素材，一键分享</p>
            <p>谁看了你的文章、视频，随时汇报</p>
            <div class="btn" @click="$navigate.to('/pages/material')">立即推广引流</div>
        </div>

        <template>
            <div class="search flex-center">
                <div class="input flex-v-center">
                    <i class="icon-search mar-r10 color-ccc"></i>
                    <input class="flex-1 fs28" type="text" placeholder="搜索看过我的人" placeholder-class="placeholder">
                </div>
            </div>

            <div class="tabs flex">
                <div class="date flex">
                    <p v-for="(i, idx) in timeTabs" 
                        @click="chooseTimeTab(i.value)"
                        :key="idx" 
                        :class="{active: i.value === actTimeTab}">{{i.label}}</p>
                </div>
                <!-- <div class="more flex-v-center">
                    <span>不提醒</span>
                    <i class="fs26 color-999 mar-l10 icon-arrow-bottom-triangle-solid"></i>
                </div> -->
            </div>
            <div class="num_box" @click="toDetail('/pages/custom/dayReport?actTimeTab=' + actTimeTab)">
                <div class="item">
                    <image src="/static/images/icon-share.webp" mode="" />
                    <span>分享次数</span>
                    <p>{{shareCnts.shareCriCnt + shareCnts.shareFriendCnt}}</p>
                </div>
                <div class="item">
                    <image src="/static/images/icon-num.webp" mode="" />
                    <span>看我次数</span>
                    <p>{{viewCnts.viewCriCnt + viewCnts.viewFriendCnt}}</p>
                </div>
                <div class="item">
                    <image src="/static/images/icon-person.webp" mode="" />
                    <span>看我人数</span>
                    <p>{{viewNums.viewCriCnt + viewNums.viewFriendCnt}}</p>
                </div>
            </div>

            <div class="tabs flex mar-t20 list_tab">
                <div class="date flex">
                    <p @click="changeType('0')" :class="{active: listType == '0'}">最近看我</p>
                    <p @click="changeType('1')" :class="{active: listType == '1'}">最多看我</p>
                </div>

                <picker mode="selector" :range="listTimes" range-key="label" @change="timeChange">
                    <div class="more flex-v-center">
                        <span>{{listTimes[actListTimeIndex].label}}</span>
                        <i class="fs20 color-999 mar-l10 icon-arrow-bottom-triangle-solid"></i>
                    </div>
                </picker>
            </div>
            <div class="list">
                <div v-if="!isVip" class="to_open_vip" @click="toOpenVip">开通会员查看</div>
                <div class="list-item flex-v-center" :class="{cant_see: !isVip}" v-for="(item, index) in list" :key="index" @click="toDetail('/pages/custom/detail?viewerId=' + item.viewerId)">
                    <div class="img">
                        <image :src="item.headImg" mode="aspectFill" />
                        <span class="point" v-if="item.unReadFlag > 0">{{item.unReadFlag}}</span>
                    </div>
                    <div class="info flex-1 w10">
                        <div class="flex-v-center">
                            <p class="flex-1 fs32 overflow">{{item.userName}}</p>
                            <em class="color-999 fs24">{{item.formatTime}}</em>
                        </div>
                        <span class="overflow fs26 color-666">{{item.title}}</span>
                    </div>
                </div>
                <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>

            </div>
        </template>
        <pub-fast-date-picker v-show="false" ref="fastDatePicker"></pub-fast-date-picker>
    </div>
</template>

<script>
import { getShareViewerTotal, getMaxViewUserHisList, getViewUsersHisList } from '@/request/user'
import { timestampToLocalDayPlus } from '@/utils/functions'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            shareCnts: {
                shareFriendCnt: 0, 
                shareCriCnt: 0
            },
            viewCnts: {
                viewFriendCnt: 0, 
                viewCriCnt: 0
            },
            viewNums: {
                viewFriendCnt: 0, 
                viewCriCnt: 0
            },
            searchTime: [],
            actTimeTab: '00',
            timeTabs: [
                {label: '今日', value: '00'},
                {label: '昨日', value: '01'},
                {label: '上周', value: '03'},
                {label: '全部', value: 'all'}
            ],
            listType: '0', //0最近看我， 1最多看我
            actListTimeIndex: 0,
            listTimes: [
                {label: '全部', value: 'all'},
                {label: '近7天', value: '06'},
                {label: '最近一个月', value: '07'},
                {label: '最近半年', value: '09'},
            ],
            times: [],
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onLoad() {
        this.scroll.max = true
    },
    onShow() {
        this.chooseTimeTab(this.actTimeTab)
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    computed: {
        isVip() {
            return this.$store.state.user.userInfo.vip == '01' 
        }
    },
    methods: {
        chooseTimeTab(e) {
            this.$nextTick(() => {
                this.actTimeTab = e
                if(e == 'all') {
                    this.searchTime = []
                } else {
                    this.searchTime = this.$refs.fastDatePicker.getFormatDate(e)
                }
                this.getTotal()
            })
        },
        getTotal() {
            getShareViewerTotal({
                startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
                endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
            }).then(res => {
                this.shareCnts = res.data.shareCnts
                this.viewCnts = res.data.viewCnts
                this.viewNums = res.data.viewNums
            })
        },
        changeType(e) {
            this.listType = e
            this.onRefresh()
        },
        timeChange(e) {
            this.actListTimeIndex = e.detail.value
            this.$nextTick(() => {
                let timeKey = this.listTimes[this.actListTimeIndex].value
                if(timeKey == 'all') {
                    this.times = []
                } else {
                    this.times = this.$refs.fastDatePicker.getFormatDate(timeKey)
                }
                this.onRefresh()
            })
        },
        getList(complete) {
            const api = [getViewUsersHisList, getMaxViewUserHisList][this.listType]
            api({
                viewTypeStr: '1,7,8,9,5,10,11,12',
                startTime: this.times[0] ? this.times[0] + ' 00:00:00' : void 0,
                endTime: this.times[1] ? this.times[1] + ' 23:59:59' : void 0,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                res.data.list.forEach(item => {
                    item.formatTime = timestampToLocalDayPlus(item.createTime)
                })
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        async toDetail(url) {
            await this.$checkVip()
            this.$navigate.to(url)
        },
        toOpenVip() {
            this.$checkVip()
        }

    }
}
</script>

<style lang="less" scoped>
.no_vip{
    image{
        width: 630rpx;
    }
    .title{
        padding: 20rpx 0 40rpx;
        font-size: 60rpx;
        font-weight: bold;
    }
    p{
        color: #888;
        font-weight: 500;
        font-size: 36rpx;
        line-height: 60rpx;
    }
    .btn{
        width: 540rpx;
        height: 120rpx;
        border-radius: 60rpx;
        background: @mainColor;
        .align(center);
        font-size: 42rpx;
        font-weight: bold;
        color: #fff;
        margin-top: 100rpx;
    }
}

.search{        
    width: 100%;
    height: 120rpx;
    background: #fff;
    .input{
        width: 680rpx;
        border-radius: 45rpx;
        height: 90rpx;
        background: #f3f4f6;
        padding: 0 20rpx;
        
    }
}
.tabs{
    background: #fff;
    padding: 30rpx 20rpx 20rpx;
    top: 0;
    .date{
        flex: 1;
        p{
            height: 100%;
            line-height: 60rpx;
            padding: 0 20rpx;
            font-size: 32rpx;
            color: #999;
            &.active{
                font-weight: 700;
                color: #333;
                position: relative;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30%;
                    height: 10rpx;
                    background: @mainColor;
                }
            }
        }
    }
    .more{
        font-weight: 700;
        color: #333;
    }
}
.num_box{
    width: 100%;
    background: #fff;
    padding: 8rpx 50rpx 40rpx;
    .align(h-space-around);
    .item{
        width: 200rpx;
        height: 180rpx;
        .align(center, column);
        image{
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 10rpx;
            .overflow;
        }
        span{
            width: 100%;
            font-size: 26rpx;
            margin-bottom: 10rpx;
            color: #666;
            text-align: center;
        }
        p{
            color: #007aff;
            font-size: 42rpx;
            font-weight: bold;
            line-height: 42rpx;
        }
    }
}
.list_tab{
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1rpx solid #ddd;
}
.list{
    background: #fff;
    padding: 0 0 200rpx;
    position: relative;
    .to_open_vip{
        width: 400rpx;
        height: 80rpx;
        background: @mainColor;
        border-radius: 40rpx;
        .align(center);
        position: absolute;
        top: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        color: #fff;
        font-weight: bold;
        
    }
    .list-item{
        width: 100%;
        height: 160rpx;
        padding: 0 25rpx;
        border-bottom: 1rpx solid #eee;
        &.cant_see{
            position: relative;
            &::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 10;
                background: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(6px);
            }
        }

        &:last-child{
            border: 0;
        }

        .img{
            width: 100rpx;
            height: 100rpx;
            position: relative;
            margin-right: 25rpx;
            image{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .point{
                position: absolute;
                top: 0;
                left: 75rpx;
                color: #fff;
                padding: 0 10rpx;
                height: 32rpx;
                font-size: 24rpx;
                border-radius: 16rpx;
                z-index: 99;
                .align(center);
                background: #e02e42;
            }
        }

        .info{
            height: 120rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

    }
}

</style>